<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <div class="form-title">查看考勤设备</div>
            <el-form :model="dataForm" ref="dataForm" label-width="95px" class="form">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">基础设备信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="设备定位：" prop="sPosition">
                                    <span>{{dataForm.sPosition}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="设备类型：">
                                    <span>{{dataForm.sDeviceName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="设备ID：">
                                    <span>{{dataForm.sNumber}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" v-if="this.schoolType=='0'">
                            <el-col :span="12">
                                <el-form-item label="关联年级：" prop="grade">
                                    <span>{{dataForm.grade}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="关联班级：">
                                    <span>{{dataForm.classId}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">推送提示语</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="提示语：" prop="sTip">
                                    <span>{{dataForm.sTip}}</span> 报平安！家长请放心！
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm('dataForm')">返回</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {getDeviceInfo} from 'api/equipmentMange';
import { mapGetters } from 'vuex';

export default {
    name: 'getEquipment',
    components: { Levelbar },
    data() {
        return {
            loading: true,
            tempStatus: 0,
            schoolStatus: 3,
            gradeList: [], // 年级列表
            classList: [], // 班级列表
            dataForm: {
                // 基础设备信息
                sPosition: '', // 设备定位
                sDeviceType: '', // 设备类别
                sDeviceName: '', // 设备类型名字
                sManufactor: '', // 厂商
                sNumber: '', // 设备ID
                schoolCode: '', // 学校code
                key: '', // KEY
                // 关联学校
                schoolName: '', // 学校名字
                schoolId: '',   // 学校id               
                grade: '', // 年级
                classId: '', // 班级
                sTip: '' // 推送提示语
            }
        };
    },
    created() {
        this.getDevice();
    },
    computed: {
        ...mapGetters([
            'schoolType'
        ])
    },
    methods: {
        resetForm(dataForm) {
            window.history.back();
        },
        getDevice() {
            getDeviceInfo(this.$route.params.id).then(res => {
                this.dataForm.sPosition = res.data.content.sPosition;
                this.dataForm.sDeviceName = res.data.content.sDeviceName;
                this.dataForm.sDeviceType = res.data.content.sDeviceType;
                this.dataForm.sManufactor = res.data.content.sManufactor;
                this.dataForm.sNumber = res.data.content.sNumber;
                this.dataForm.schoolName = res.data.content.schoolName;
                this.dataForm.schoolId = res.data.content.fSchoolId;
                this.dataForm.sTip = res.data.content.sTip || 'e学云';
                this.dataForm.grade = res.data.content.gradeName || '--';
                this.dataForm.classId = res.data.content.className || '--';
                this.loading = false;
            })
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
      .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
            // background: #30B08F url('../../../images/student/noteLavel.png') no-repeat 0 0;
          }
        }
        .form-content {
            margin: 0 8px;
        }
        .item {
          margin-bottom: 20px;
        }
        .back {
          margin-top: 20px;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
        }
        .title-way {
          padding-right: 15px;
        }
        .note{
            color: #999;
            font-size: 15px;
            line-height: 36px;
        }
        .control {
          text-align: right;
        }
      }
    }
  }
}
</style>